<template>
    <div>
         <h3>显示门店信息列表</h3>
         <input type="text" placeholder="请输入门店名称!" v-model="page.storename">
         <select v-model="page.storestart">
            <option value="0">请选择状态</option>
            <option :value="1">开店</option>
            <option :value="2">闭店</option>
         </select>
         <input type="button" value="查询" @click="queryshow">
         <table class="table">
                 <thead>
                    <tr>
                        <th>编号</th>
                        <th>门店名称</th>
                        <th>门店图片</th>
                        <th>门店状态</th>
                        <th>门店录入时间</th>
                        <th>操作</th>
                    </tr>
                 </thead>
                 <tbody>
                    <tr v-for="d in showdata">
                        <td>{{ d.storeId }}</td>
                        <td>{{ d.storeName }}</td>
                        <td><img :src="axios.defaults.baseURL+d.storeImg" style="width: 60px;height: 60px;"></td>
                        <td>{{ d.storeStart==1?"开店":"闭店"}}</td>
                        <td>{{moment(d.createTime).format("YYYY-DD-MM HH:ss:mm").toString()}}</td>
                        <td>
                          <input type="button" :value="d.storeStart==1?'闭店':'开店'" @click="updstart(d.storeId)">
                          &emsp;
                          <input type="button" value="修改" @click="jumpupd(d.storeId)">
                        </td>
                    </tr>
                 </tbody>
         </table>
         共{{ sum.count }}行
         共{{ sum.pagecount }}页
         每页{{ page.size }}条
         当前第{{ page.index }}页
         <input type="button" value="首页" @click="index(1)">
         <input type="button" value="上一页" @click="index(2)">
         <input type="button" v-for="d in sum.pagecount" :value="d" @click="updindex(d)">
         <input type="button" value="下一页" @click="index(3)">
         <input type="button" value="尾页" @click="index(4)">

         <input type="number" v-model="page.index">
         <input type="button" value="跳转" @click="jumpindex">
         每页显示
         <select v-model="page.size" @change="updsize">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
         </select>条
         <br>   
         <a href="/showall">返回首页</a>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()

import moment from 'moment';

onMounted(()=>{
    showstore()
})

//跳转至修改页面
const jumpupd=(uid:number)=>{
     router.push({path:'/updstore',query:{id:uid}})
}

const queryshow=()=>{
    page.value.index=1
    showstore()
}

//分页+查询条件
const page=ref({
    index:1,
    size:2,
    storename:'',
    storestart:0
})
//总
const sum=ref({
    count:0,
    pagecount:0
})

const showdata=ref([{
    "storeId": 1,
      "storeName": "安平大酒店",
      "storeImg": "/img/1.webp",
      "storeStart": 0,
      "storeTime": "2025-06-16T15:19:11.6145446",
      "isDel": false,
      "createUserId": 0,
      "createTime": "2025-06-16T15:19:11.6145446",
      "deleteUserId": 0,
      "deleteTime": null,
      "updateUserId": 0,
      "updateTime": null
}])
//显示门店
const showstore=()=>{
    axios.get('/api/Store/ShowStore',{params:page.value}).then(res=>{
    showdata.value=res.data.data
    sum.value.count=res.data.count
    sum.value.pagecount=Math.ceil(sum.value.count/page.value.size)
    })
}

//分页
const index=(val:number)=>{
    if(val==1)
{
    page.value.index=1
    showstore()
}
 if(val==2&&page.value.index>1)
{
    page.value.index--
    showstore()
}
if(val==3&&page.value.index<sum.value.pagecount)
{
    page.value.index++
    showstore()
}
 if(val==4)
{
    page.value.index=sum.value.pagecount
    showstore()
}
}
const updindex=(val:number)=>{
    page.value.index=val
    showstore()
}
const jumpindex=()=>{
    if(page.value.index<1||page.value.index>sum.value.pagecount)
{
    alert('页码超出范围')
    page.value.index=1
}
showstore()
}
const updsize=()=>{
    page.value.index=1
    showstore()
}

//修改状态
const  updstart=(sid:number)=>{
        if(!confirm('确定修改状态么!!!'))
        {
            return;
        }
        axios.get('/api/Store/UpdStart',{params:{id:sid}}).then(res=>{
            if(res.data>0)
     {
        alert('状态修改成功!!')
        showstore()
     }
    else
    {
        alert('状态修改失败!!')
        return;
    }
        })
}
</script>

<style scoped>

</style>    